<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import axios from "axios";

const chartRef = ref(null);
let chartInstance = null;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);

  chartInstance.setOption({
    grid: {
      left: 60, // 让纵轴有足够空间
    },
    title: {
      text: "用户注册趋势",
      textStyle: { color: "#fff" },
      left: "center",
    },
    tooltip: {
      //当你鼠标移动到图上，会出现浮动提示框
      trigger: "axis", //trigger: 'axis' 表示提示框会跟随 x 坐标轴移动（横向联动）
    },
    xAxis: {
      type: "category", // 类目轴（常用于横坐标是日期、星期）
      data: [], // 初始为空，后面用 setOption 更新
      axisLine: { lineStyle: { color: "#ccc" } }, // 设置坐标轴颜色
    },
    yAxis: {
      type: "value", //纵轴显示数值型（自动计算 min/max）
      axisLine: { lineStyle: { color: "#ccc" } },
      axisLabel: {
        formatter: (v) => v.toLocaleString(), // 显示成 1,000 / 2,000
      },
    },
    series: [
      {
        type: "line", // 折线图
        data: [], // 初始为空，后面更新
        smooth: true, // 线条是否平滑
        areaStyle: {}, // 显示曲线下方的填充区域（面积图效果）
      },
    ],
  });
};

// 请求数据并更新图表
const updateChart = async () => {
  const res = await axios.get("/api/chart/register-trend");
  if (res.data.code !== 0) return;
  const { data } = res.data;
  const days = data.map((v) => v.day);
  const values = data.map((v) => v.value);
  chartInstance.setOption({
    xAxis: { data: days },
    series: [{ data: values }],
  });
};

onMounted(() => {
  initChart();
  updateChart();
  // 每 5 秒更新一次数据
  // const timer = setInterval(updateChart, 5000);
  // onBeforeUnmount(() => clearInterval(timer));
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
